<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>浮动的变化</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style>
    .one{
        height: 100px;
        width: 100px;
        background-color: red;
        float:left;
       /* 这个就是转换成为行内块级元素display是显示的意思 */

    }
    .two{
        height: 100px;
        width: 100px;
        background-color: yellow;
        float:left;
    }
    .fd{
        height: 100px;
        width: 100px;
        background-color: teal;
        float:left;
    }

     span{
			 	 background-color: red;
			 	 width: 100px;
			 	 height: 100px;

			 	 float: left;
			 }

    
    </style>
</head>
<body>
        <!-- 标准流(文档流)
        块级元素独占一行显示    标准流的显示方式
        元素默认的显示方式就是标准流。 -->
       <span>
           行级1
       </span>

        <span>
                行级元素
                </span>
    
    <div class="one">
       块级元素
    </div>
    <div class="two">
        块级2元素
    </div>

    <div class="fd">
            浮动
    </div>
   

    <!-- 浮动
    用法：
     Float:left| right
    特点：
      ☞设置了浮动的元素不占原来的位置（脱标） 
      ☞可以让块级元素在一行上显示    
   ☞浮动可以行内元素转化为行内块元素
模式转换的过程中，能用display就用display
    作用：
    ☞ 浮动用来解决文字图片环绕问题
    ☞ 制作导航栏
       ☞网页布局 -->

</body>
</html>